<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      >医生信息</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="d-list">
      <div class="list-box">
        <div class="head">
          <van-image
            round
            width="0.7rem"
            height="0.7rem"
            :src="items.headImage"
          />
          <div class="right">
            <div class="up">
              <span>{{ items.realName }}</span>
              <span>{{ items.post }}</span>
              <span>{{ items.departmentName }}</span>
              <!-- <span>阅片费:1111</span> -->
            </div>
            <div class="down">
              <span>{{ items.hospitalName }}</span>
              <span>{{ items.hospitalLevel }}</span>
            </div>
          </div>
        </div>
        <div class="work">
          <p class="title">擅长：</p>
          <p class="content">
            {{ items.skilled }}
          </p>
          <p class="title">个人简介：</p>
          <p class="content">
            {{ items.introduction }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import navbar from "@/components/navbar";
export default {
  name: "doctorDetail",
  data() {
    return {
      items: "",
    };
  },

  components: { navbar },

  computed: {},

  created() {
    window.scroll(0, 0);
    Toast.setDefaultOptions({ duration: 500 });
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
      overlay: true,
    });
    // console.log(JSON.parse(this.$route.params.detail));
    this.items = this.$route.params.detail
      ? JSON.parse(this.$route.params.detail)
      : "";
  },
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({ path: "/doctorList" });
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  & .d-list {
    width: 95%;
    height: 100%;
    margin: auto;
    padding-bottom: 0.1rem;
    & .list-box {
      border-radius: 0.1rem;
      background: #fff;
      margin-top: 0.1rem;
      margin-bottom: 0.1rem;
      box-shadow: 4px 4px 10px #cccccc;
      & .head {
        display: flex;
        justify-content: space-around;
        padding-top: 0.2rem;
        & .right {
          width: 70%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          & .up {
            display: flex;
            justify-content: space-between;
            vertical-align: auto;
            & span:nth-of-type(1) {
              font-size: 0.2rem;
            }
            & span:nth-of-type(2) {
              font-size: 0.14rem;
            }
            & span:nth-of-type(3) {
              font-size: 0.14rem;
            }
          }
          & .down {
            display: flex;
            justify-content: space-between;
            & span:nth-of-type(1) {
              font-size: 0.14rem;
            }
            & span:nth-of-type(2) {
              font-size: 0.14rem;
              color: red;
            }
          }
        }
      }
      & .work {
        text-align: left;
        margin-top: 0.1rem;
        // text-indent: 0.1rem;
        border-top: 1px solid #eaeaea;
        font-size: 0.14rem;
        padding: 0.1rem;
        & .title {
          margin: 0.1rem 0;
          font-size: 0.16rem;
          color: #999999;
        }
        & .content {
          text-indent: 0.1rem;
          line-height: 0.28rem;
          font-size: 0.16rem;
        }
      }
    }
  }
}
</style>